<template>
    <div class="index-card">
        <el-card shadow="hover" @click.prevent="cardClick('common','通用工具')">
            <template #header>通用工具</template>
            <img src="https://pic.rmb.bdstatic.com/bjh/gallery/c49f98dffa389c1c49771b371e8e0019.jpeg@wm_2,t_55m+5a625Y+3L+ejiuWwj+eZvQ==,fc_ffffff,ff_U2ltSGVp,sz_48,x_30,y_30" style="width: 100%" />
        </el-card>
        <el-card shadow="hover" @click.prevent="cardClick('pdf','PDF转换工具')">
            <template #header>PDF转换工具</template>
            <img src="https://imgs.aixifan.com/FlCKz97_m7A5ep0wUPY-dd_vlF3x" style="width: 100%" />
        </el-card>
        <el-card shadow="hover" @click.prevent="cardClick('cron','Cron表达式生成器')">
            <template #header>Cron表达式生成器</template>
            <img src="https://img-baofun.zhhainiao.com/fs/1350c06d4cd27ceb462fc4157aca0744.jpg" style="width: 100%" />
        </el-card>
        <el-card shadow="hover" @click.prevent="cardClick('WebSocket','WebSocket 在线测试工具')">
            <template #header>WebSocket 在线测试工具</template>
            <img src="https://mingdongman-zuopin.oss-cn-shenzhen.aliyuncs.com/zuopin/161493491047310847.jpg" style="width: 100%" />
        </el-card>
        <el-card shadow="hover" @click.prevent="cardClick('tyqwty','通义千问2.5体验集')">
            <template #header>通义千问2.5体验集</template>
            <img src="https://img-baofun.zhhainiao.com/fs/17dddda8e37a8c5eaf3748f5a3652aa9.jpg" style="width: 100%" />
        </el-card>
        <el-card shadow="hover" @click.prevent="cardClick('tyqw','通义千问')">
            <template #header>通义千问</template>
            <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/08eabbfc3ad1acd1b2ae1e9de7240bfd.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_960%2ch_540" style="width: 100%" />
        </el-card>
        <el-card shadow="hover" @click.prevent="cardClick('wxyy','文心一言')">
            <template #header>文心一言</template>
            <img src="https://img-baofun.zhhainiao.com/fs/ac461bbc7fa1dc275a164a3119f2a748.jpg" style="width: 100%" />
        </el-card>
        <el-card shadow="hover" @click.prevent="cardClick('bdfy','百度翻译')">
            <template #header>百度翻译</template>
            <img src="https://fp1.fghrsh.net/2021/02/08/af96c453d4264f2deb808196ea721845.jpg" style="width: 100%" />
        </el-card>
    </div>
    <div>
        <el-dialog v-model="isOpen" :title="title" width="80%" style="height: 700px;" :close="dialogClose">
            <el-link :href="url" type="primary" target="_blank">地址直达</el-link>
            <iframe :src="url" frameborder="0" style="width: 100%;height: 550px;" ref="fIframe"></iframe>
        </el-dialog>
    </div>
</template>

<script setup>
import {ref} from "vue";

const isOpen = ref(false)
const title = ref('')
const url = ref('')

const cardClick = (brand, headTitle) => {
    title.value = headTitle
    isOpen.value = true
    if(brand === 'common'){
        url.value = 'https://ol-tools.com/'
    }else if(brand === 'pdf'){
        url.value = 'https://stirlingpdf.io/?lang=zh_CN'
    }else if(brand === 'cron'){
        url.value = 'https://cron.qqe2.com/'
    }else if(brand === 'WebSocket'){
        url.value = 'http://wstool.js.org/'
    }else if(brand === 'tyqwty'){
        url.value = 'https://modelscope.cn/studios/qwen/Qwen2.5'
    }else if(brand === 'tyqw'){
        url.value = 'https://tongyi.aliyun.com/qianwen/'
    }else if(brand === 'wxyy'){
        url.value = 'https://yiyan.baidu.com/'
    }else if(brand === 'bdfy'){
        url.value = 'https://fanyi.baidu.com/mtpe-individual/multimodal#/'
    }else{
        url.value = 'http://tool.zaonao.cn/'
    }
}

const dialogClose = () => {
    url.value = ''
}
</script>

<style scoped>
.index-card{
    .el-card{
        width: 350px;
        /* height: 350px; */
        float: left;
        margin: 15px 15px;
    }
}
.el-dialog__body{
    height: 100% !important;        
}
</style>